feat(page): Add toggle for full width page view #874

mejo- · 2023-09-12T14:41:14Z

The full width mode is a per-page user setting and is persisted in browser storage. It will not persist across devices.

Fixes: #242

Screenshots

Nomal	Full width

🏁 Checklist

Code is properly formatted (npm run lint / npm run stylelint / composer run cs:check)
Sign-off message is added to all commits
Tests (unit, integration and/or end-to-end) passing and the changes are covered with tests
Documentation is not required

cypress · 2023-09-12T15:50:49Z

5 failed and 4 flaky tests on run #1150 ↗︎

5	234	0	0	4
⚠️ You've recorded test results over your free plan limit. Upgrade your plan to view test results.

Details:

feat(page): Add toggle for full width page view
Project: Collectives	Commit: `244fda6e98`
Status: Failed	Duration: 37:16 💡
Started: Sep 13, 2023 2:53 PM	Ended: Sep 13, 2023 3:31 PM

_{This comment has been generated by cypress-bot as a result of this
project's GitHub integration settings.}

nimishavijay

Super nice! Notes from the design review:

Move "Last changed by" item to the top
Add divider before and after "Full width" and "Show outline"

Jane Doe an hour ago
---
Full width
Show outline 
---
Add template for subpages
Show in Files
Delete page

Bug: if full-width is toggled, the action menu does not close, but 3 dot menu moves --> to be fixed in component
- Temporary solution: Always show the group of 3 buttons (Edit, 3dot menu, sidebar toggle) at the right end of the page
- Group of buttons should have equal top and right margin
- Nice-to-have: buttons are aligned with top right header buttons (avatar, notifications, contact search, universal search)

mejo- · 2023-09-13T11:05:09Z

@nimishavijay I addressed all the topics we discussed in the call, please see the updated screenshots ☺️

nimishavijay

Super! :)

jancborchardt · 2023-09-13T11:39:14Z

@KaeTuuN @theron29 since you commented in the issue this fixes, would this "per-page per-device" setting work for you?

@mejo- I’m leaning a bit towards that the layout should be a per-device setting across pages, since per the issue it seems it’s mostly people with large screens, and that doesn’t change across pages.

juliusknorr · 2023-09-13T11:55:16Z

@mejo- I’m leaning a bit towards that the layout should be a per-device setting across pages, since per the issue it seems it’s mostly people with large screens, and that doesn’t change across pages.

From my perspective it is more the actual page content that would influence if you want to use the full width or regular width mode, e.g. for pages with long text you might prefer a limited width for readability while for pages with larger tables or other content a full width is more suitable. I think mid term we should also adapt this in text itself, so having it per document could also be stored in the file rather than per user.

max-nextcloud

Had a quick look at the code. Looks good all in all.

Just one minor thing that needs to be addressed before the merge.

cypress/e2e/pages.spec.js

theron29 · 2023-09-13T14:04:25Z

@jancborchardt Yes, this actually looks very good and promising 👍

mejo- · 2023-09-13T15:33:02Z

Failing Cyress tests are related, will look into it next week.

KaeTuuN · 2023-09-14T08:00:38Z

@jancborchardt Thanks for mentioning me!

First: Thanks for developing! (@mejo- )
Second:

Will this Setting also affect the Edit Mode? (I hope so :-) )
Won't it be possible to move the Option directly to the top? Reason: Most complains were about table views and now you have to do more clicks for switching if you just want to view a table on full width and then go back to "normal" mode.

Greetings,
Kae

max-nextcloud · 2023-09-14T08:23:39Z

2. Won't it be possible to move the Option directly to the top?

I don't quite understand where you would put it. Could you edit one of the screenshots above with an indication where you would expect to find this feature?

KaeTuuN · 2023-09-14T08:38:12Z

I'm on my Smartphone atm.
I just want to put it as an Icon next to the edit Button.
Expand Button might look similar to this: https://cdn4.iconfinder.com/data/icons/ui-controls-editor/32/interface-controls-horizontal-expand-512.png
And the shrink Button might look similar to this: https://cdn.onlinewebfonts.com/svg/img_278259.png
The Icon changes in case of switching width.

Greetings,
Kae

jancborchardt

Thanks for the additional explanation @juliushaertl, then looks good design-wise. :)

And the setting is good in the menu, moving it out would make it too present compared to how important it is.

Fixes: #242 Signed-off-by: Jonas <[email protected]>

Signed-off-by: Jonas <[email protected]>

mejo- · 2023-09-14T11:43:22Z

1. Will this Setting also affect the Edit Mode? (I hope so :-) )

Sure 😊

2. Won't it be possible to move the Option directly to the top? Reason: Most complains were about table views and now you have to do more clicks for switching if you just want to view a table on full width and then go back to "normal" mode.

Well, as @jancborchardt already said, this would be a bit too prominent. We try to not clutter the user interface with too many buttons and switches to not overwhelm users.

src/store/pages.js

Also add same top and right margin to titlebar. Signed-off-by: Jonas <[email protected]>

We might want to use this within Text later on, so let's already prefix it with `text-` instead of `collectives-`. Signed-off-by: Jonas <[email protected]>

mejo- added enhancement New feature or request 3. to review labels Sep 12, 2023

mejo- requested review from jancborchardt, juliusknorr, marcoambrosini, nimishavijay and max-nextcloud September 12, 2023 14:47

mejo- force-pushed the feat/full_width branch from 187fef8 to c16f775 Compare September 12, 2023 15:00

nimishavijay requested changes Sep 13, 2023

View reviewed changes

mejo- force-pushed the feat/full_width branch 3 times, most recently from 27f662b to c4ebae3 Compare September 13, 2023 11:01

mejo- requested a review from nimishavijay September 13, 2023 11:05

nimishavijay approved these changes Sep 13, 2023

View reviewed changes

max-nextcloud requested changes Sep 13, 2023

View reviewed changes

cypress/e2e/pages.spec.js Outdated Show resolved Hide resolved

mejo- force-pushed the feat/full_width branch from c4ebae3 to 1412a42 Compare September 13, 2023 14:33

mejo- requested a review from max-nextcloud September 13, 2023 14:34

mejo- force-pushed the feat/full_width branch from 1412a42 to 244fda6 Compare September 13, 2023 14:36

marcoambrosini approved these changes Sep 14, 2023

View reviewed changes

jancborchardt approved these changes Sep 14, 2023

View reviewed changes

feat(page): Add toggle for full width page view

42b77ab

Fixes: #242 Signed-off-by: Jonas <[email protected]>

mejo- added 2 commits September 14, 2023 13:33

test(cypress): test full width view toggle

16dfa3c

Signed-off-by: Jonas <[email protected]>

feat(PageActionMenu): Reorder and refactor page actions menu

201b9ac

Signed-off-by: Jonas <[email protected]>

mejo- force-pushed the feat/full_width branch from 244fda6 to e7a92fd Compare September 14, 2023 11:40

juliusknorr reviewed Sep 14, 2023

View reviewed changes

src/store/pages.js Outdated Show resolved Hide resolved

mejo- requested a review from juliusknorr September 14, 2023 11:53

mejo- added 2 commits September 14, 2023 14:07

fix(titlebar): align buttons to the right

75c6844

Also add same top and right margin to titlebar. Signed-off-by: Jonas <[email protected]>

fix(persistentStorage): Prefix persistent storage key with text-

7f6a6b7

We might want to use this within Text later on, so let's already prefix it with `text-` instead of `collectives-`. Signed-off-by: Jonas <[email protected]>

mejo- force-pushed the feat/full_width branch from 641cfbb to 7f6a6b7 Compare September 14, 2023 12:07

juliusknorr mentioned this pull request Sep 15, 2023

Configurable line-length for Editor nextcloud/text#4024

Closed

mejo- merged commit 3bb2e21 into main Sep 15, 2023
31 of 34 checks passed

delete-merged-branch bot deleted the feat/full_width branch September 15, 2023 20:44

juliusknorr assigned mejo- Oct 25, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(page): Add toggle for full width page view #874

feat(page): Add toggle for full width page view #874

mejo- commented Sep 12, 2023 •

edited

Loading

cypress bot commented Sep 12, 2023 •

edited

Loading

nimishavijay left a comment •

edited by mejo-

Loading

mejo- commented Sep 13, 2023

nimishavijay left a comment

jancborchardt commented Sep 13, 2023

juliusknorr commented Sep 13, 2023

max-nextcloud left a comment

theron29 commented Sep 13, 2023

mejo- commented Sep 13, 2023

KaeTuuN commented Sep 14, 2023

max-nextcloud commented Sep 14, 2023

KaeTuuN commented Sep 14, 2023 •

edited

Loading

jancborchardt left a comment

mejo- commented Sep 14, 2023

feat(page): Add toggle for full width page view #874

feat(page): Add toggle for full width page view #874

Conversation

mejo- commented Sep 12, 2023 • edited Loading

Screenshots

🏁 Checklist

cypress bot commented Sep 12, 2023 • edited Loading

5 failed and 4 flaky tests on run #1150 ↗︎

nimishavijay left a comment • edited by mejo- Loading

Choose a reason for hiding this comment

mejo- commented Sep 13, 2023

nimishavijay left a comment

Choose a reason for hiding this comment

jancborchardt commented Sep 13, 2023

juliusknorr commented Sep 13, 2023

max-nextcloud left a comment

Choose a reason for hiding this comment

theron29 commented Sep 13, 2023

mejo- commented Sep 13, 2023

KaeTuuN commented Sep 14, 2023

max-nextcloud commented Sep 14, 2023

KaeTuuN commented Sep 14, 2023 • edited Loading

jancborchardt left a comment

Choose a reason for hiding this comment

mejo- commented Sep 14, 2023

mejo- commented Sep 12, 2023 •

edited

Loading

cypress bot commented Sep 12, 2023 •

edited

Loading

nimishavijay left a comment •

edited by mejo-

Loading

KaeTuuN commented Sep 14, 2023 •

edited

Loading